<div class="layui-card">

    <div class="layui-card-body">
        <h1 style="margin-left: 400px">月报</h1>
        <div class="layui-form toolbar">
            <div class="layui-inline layui-show-xs-block">
                <input class="layui-input" autocomplete="off" placeholder="选择月份" name="start" id="start" ></div>
            <button id="menus-btn-search" class="layui-btn icon-btn"><i class="layui-icon">&#xe615;</i>搜索</button>
        </div>

        <!-- 数据表格 -->
        <table class="layui-table" id="monthly-table" lay-filter="menus-table"></table>
    </div>
</div>


<script>

    layui.use(['form', 'table', 'util', 'config', 'admin', 'formSelects', 'treetable','laydate'], function () {
        var table = layui.table;
        var layer = layui.layer;
        var admin = layui.admin;
        var treetable = layui.treetable;
        var config = layui.config;
        var form = layui.form;
        var laydate=layui.laydate;
        //执行一个laydate实例
        laydate.render({
            elem: '#start', //指定元素
            type: 'month',
            format: 'yyyy-MM', //日期格式
            min: '2020-01-01 00:00:00', //最小日期
            change : function(value, date) {
                $("#start").val(value);
            },
            ready : function(date) {
                $(".layui-laydate").off('click').on('click', '.layui-laydate-list li', function() {
                    $(".layui-laydate").remove();
                });
                var tdTemp = $(tdElem);
                tdTemp.addClass('2021-6-21');
            },

        });
        $.ajax({
            url: config.base_server + 'api-administrators/finance/monthlyReport',
            data: {access_token: config.getToken().access_token},
            type: 'get',
            dataType: 'json',
            success: function (aa) {
                console.log(aa.data[0].datetime);
                var ul = '';
                for (var i = 0; i < aa.data.length; i++) {
                    ul += "<li class='test' style='display: block;float: left;margin-left: 50px;'>" + aa.data[i].datetime + "</li>";
                }
                $("#ul").html(ul);
                form.render();
            }
        });

        // 渲染表格
        table.render({
            elem: '#monthly-table',
            url: config.base_server + 'api-administrators/finance/monthlyFindAll',
            where: {
                access_token: config.getToken().access_token
            },
            page: true,
            parseData: function (res) {
                console.log(res)
                return {
                    "code": 0,
                    "msg": "",
                    "total": res.data.total,
                    "data": res.data.list,
                    "count": res.data.total,
                };
            },
            totalRow: true,
            cols: [[
                {type: 'numbers', totalRowText: '合计'},
                {field: 'orcode', minWidth: 200, title: '订单号'},
                {field: 'stname', title: '工位名称'},
                {field: 'letime', align: 'center', title: '租赁时间'},
                {field: 'prices', align: 'center', title: '订单价格', sort: true, totalRow: true},
                {field: 'crtime', title: '创建时间'}
            ]]
        });
        // 搜索按钮点击事件
        $('#menus-btn-search').click(function () {
            var keyword = $('#start').val();
            table.reload('monthly-table', {where: {crtime: keyword+'-1'}});
        });
    });
</script>